<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: data.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
  import fontSize from "@/modules/fontSize";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    number: {
      // 返回的数据
      type: Boolean,
      default: false,
    },
  },
   computed: {
    ...mapGetters(["echartsColor"]),
  },
  watch: {
    echartsColor: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
  },
  mounted() {},
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          var _this = this;
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          var data = [50, 60, 70, 20, 30, 10];
          let xData = [];
          let yData = [];
          let defaultData = [];
          var totalPrice = 0;
          for (let i = 0; i < this.data.length; i++) {
            xData.push(this.data[i].name);
            yData.push(this.data[i].value);
            if (this.number == false) {
              defaultData.push(100);
            }
          }
          var num = Math.max(...yData);
          if (this.number == true) {
            for (let k of this.data) {
              defaultData.push(1.5 * num);
            }
          }
          for (var i = yData.length - 1; i >= 0; i--) {
            totalPrice += yData[i];
          }
          var colorList = ["#2c76bf"];
          let option = {
            grid: {
              left: "5%",
              right: "5%",
              bottom: "5%",
              top: "10%",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "none",
              },
              formatter: function (params) {
                return (
                  params[0].name +
                  "<br/>" +
                  "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                  // params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
                  params[0].seriesName +
                  " : " +
                  params[0].value
                );
              },
            },
            xAxis: {
              show: false,
              type: "value",
            },
            yAxis: [
              {
                type: "category",
                inverse: true,
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: this.echartsColor,
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                data: xData,
              },
              {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                  textStyle: {
                    color: "rgba(43,221,241,1)",
                    fontSize: 12,
                    // fontSize: fontSize.fontSize(12),
                  },
                  formatter: (params) => {
                    let percent = ((params / totalPrice) * 100).toFixed(0);
                    if (this.number == true) {
                      return ` {b|${percent}%}{a|${params}}`;
                    } else {
                      return ` {b|${params}%}`;
                    }
                  },
                  rich: {
                    a: {
                      color: "#F6CE54",
                      padding: [0, 0, 0, 10],
                      align: "left",
                    },
                    b: {
                      color: "#2BDDF1",
                      align: "left",
                    },
                  },
                },
                data: yData,
              },
            ],
            series: [
              {
                name: "数量",
                type: "bar",
                zlevel: 2,
                itemStyle: {
                  normal: {
                    barBorderRadius: 0,
                    // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    //     offset: 0,
                    //     color: 'rgb(57,89,255,1)'
                    // }, {
                    //     offset: 1,
                    //     color: 'rgb(46,200,207,1)'
                    // }]),
                    color: (params) => {
                      // return colorList[params.dataIndex];
                      return colorList[0];
                    },
                  },
                },
                barWidth: 10,
                data: yData,
              },
              {
                name: "背景",
                type: "bar",
                barWidth: 10,
                barGap: "-100%",
                data: defaultData,
                itemStyle: {
                  normal: {
                    color: "rgba(138,197,255,1)",
                    barBorderRadius: 0,
                  },
                },
              },
            ],
          };
          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>